<template>
    <el-row>
        <v-chart class="row-chart" :option="statOption" autoresize />
    </el-row>
    <el-row>
        <v-chart class="chart" :option="damOption" autoresize />
        <v-chart class="chart" :option="cfsOption" autoresize />
    </el-row>
</template>
<script setup lang="ts" name="PanCunEcharts">
import { ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { use } from 'echarts/core.js';
import { CanvasRenderer } from 'echarts/renderers.js';
import { PieChart } from 'echarts/charts.js';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
} from 'echarts/components.js';
import VChart, { THEME_KEY } from 'vue-echarts';

import { Request } from '@/app/request';
import { useAppStore } from '@/store/app';
import { transFormatter } from '@/common/tools';

use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
]);
// 切换主题
// provide(THEME_KEY, 'dark');

const { cyCfs, cntrStatus } = storeToRefs(useAppStore());
const statOption = ref({
    title: {
        text: '箱量',
        left: 'center',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: [''],
    },
    series: [
        {
            name: '箱量',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{}],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
    ],
});
const damOption = ref({
    title: {
        text: '箱况',
        left: 'center',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: [''],
    },
    series: [
        {
            name: '箱况',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{}],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
    ],
});
const cfsOption = ref({
    title: {
        text: '堆场箱量',
        left: 'center',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: [''],
    },
    series: [
        {
            name: '堆场箱量',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{}],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
    ],
});
const onRefresh = async () => {
    const req = new Request('首页数据展示');
    const r = await req.post();
    statOption.value.series[0].data.length = 0;
    statOption.value.legend.data.length = 0;
    damOption.value.series[0].data.length = 0;
    damOption.value.legend.data.length = 0;
    cfsOption.value.series[0].data.length = 0;
    cfsOption.value.legend.data.length = 0;
    let statTotal = 0;
    let damTotal = 0;
    let cfsTotal = 0;

    for (let index = 0; index < r.obj.cntrStat.length; index++) {
        const element = r.obj.cntrStat[index];
        const dis_name = transFormatter(
            element['current_stat'],
            cntrStatus.value,
        );
        statOption.value.legend.data.push(dis_name);
        statOption.value.series[0].data.push({
            value: parseInt(element['count']),
            name: dis_name,
        });
        statTotal += parseInt(element['count']);
    }
    statOption.value.title.text = `当前总箱量：${statTotal}`;

    for (let index = 0; index < r.obj.cntrDam.length; index++) {
        const element = r.obj.cntrDam[index];
        damOption.value.legend.data.push(element['dam_id']);
        damOption.value.series[0].data.push({
            value: parseInt(element['count']),
            name: element['dam_id'],
        });
        damTotal += parseInt(element['count']);
    }
    damOption.value.title.text = `当前总箱量：${damTotal}`;
    let otherTotal = 0;
    for (let index = 0; index < r.obj.cntrCfs.length; index++) {
        const element = r.obj.cntrCfs[index];
        const dis_name = transFormatter(element['cfs_cod'], cyCfs.value);
        cfsOption.value.legend.data.push(dis_name);
        if (index > 13) {
            otherTotal += parseInt(element['count']);
        } else {
            cfsOption.value.series[0].data.push({
                value: parseInt(element['count']),
                name: dis_name,
            });
        }

        cfsTotal += parseInt(element['count']);
    }
    if (otherTotal > 0) {
        cfsOption.value.legend.data.push('其他');
        cfsOption.value.series[0].data.push({
            value: otherTotal,
            name: '其他',
        });
    }
    cfsOption.value.title.text = `在堆场箱量：${cfsTotal}`;
};
onMounted(async () => {
    onRefresh();
    /* let chartDom = document.getElementById('xxxx');
    let myChart = echarts.init(chartDom);

    myChart.setOption(option); */
});
</script>
<style lang="scss" scoped>
.chart {
    height: 50vh;
    width: 48%;
    margin: 0 5px 5px 0;
    border: solid 2px var(--el-color-primary);
    box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.5);
}
.row-chart {
    height: 50vh;
    width: 50%;
    margin: auto;
}
</style>
